<script setup>
import { reactive, onMounted } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'

let AMap = null
let map = null

let steps = null

onMounted(() => {
  AMapLoader.load({
    key: import.meta.env.VITE_APP_AMAP_KEY,
    version: '2.0'
  })
    .then(_AMap => {
      AMap = _AMap
      map = new AMap.Map('map', {
        zoom: 11,
        center: [121.707908, 31.032434]
      })
    })
    .catch(e => {
      console.error(e)
    })
})

const form = reactive({
  policy: 4,
  lon1: '121.910716',
  lat1: '30.897579',
  waypoints: [],
  lon2: '121.475346',
  lat2: '31.168737'
})

const addItem = () => {
  form.waypoints.push({
    lon: '',
    lat: ''
  })
}

const delItem = i => {
  form.waypoints.splice(i, 1)
}

let driving = null
const onSubmit = () => {
  AMap.plugin('AMap.Driving', () => {
    if (driving) {
      driving.clear()
      driving = null
    }
    driving = new AMap.Driving({
      policy: form.policy,
      map: map
    })
    const startLngLat = [Number(form.lon1), Number(form.lat1)]
    const endLngLat = [Number(form.lon2), Number(form.lat2)]
    const waypoints = form.waypoints.map(e => [Number(e.lon), Number(e.lat)])
    const opts = {
      waypoints: waypoints
    }
    driving.search(startLngLat, endLngLat, opts, (status, result) => {
      if (status === 'complete') {
        steps = result.routes[0].steps || []
      } else {
        steps = null
      }
    })
  })
}

const toLog = () => {
  if (!steps) {
    console.error('未绘制路径')
    return
  }
  let path = []
  steps.forEach(e => {
    const _path = e.path.map(e => [e.lng, e.lat])
    path = path.concat(_path)
  })
  console.log('----------------Path----------------')
  console.log(path)
}
</script>

<template>
  <div class="flex h-screen w-screen gap-x-8 p-4">
    <div class="w-80">
      <el-form :model="form" label-position="top">
        <el-form-item label="策略">
          <el-radio-group v-model="form.policy">
            <el-radio label="最优路线" :value="4" />
            <el-radio label="最短时间" :value="0" />
            <el-radio label="避免高速" :value="1" />
            <el-radio label="最短距离" :value="2" />
            <el-radio label="避开收费路段" :value="3" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="起点">
          <el-col :span="11">
            <el-input v-model="form.lon1" placeholder="起点经度" />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-input v-model="form.lat1" placeholder="起点纬度" />
          </el-col>
        </el-form-item>
        <el-form-item label="途径点">
          <el-col :span="24">
            <el-button :icon="Plus" circle @click="addItem" />
          </el-col>
          <el-row v-for="(item, i) in form.waypoints" :key="i" class="mt-2">
            <el-col :span="9">
              <el-input v-model="item.lon" placeholder="终点经度" />
            </el-col>
            <el-col :span="2" class="text-center">
              <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="9">
              <el-input v-model="item.lat" placeholder="终点纬度" />
            </el-col>
            <el-col :span="4" class="text-center">
              <el-button :icon="Minus" circle @click="delItem(i)" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="终点">
          <el-col :span="11">
            <el-input v-model="form.lon2" placeholder="终点经度" />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-input v-model="form.lat2" placeholder="终点纬度" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询路线</el-button>
          <el-button type="primary" @click="toLog">打印Path</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="map" class="flex-1"></div>
  </div>
</template>
